<template>
    <div class="comment" ref="commentRef">
        <div class="positionR comment-position-conent">
            <div class="no-wcomment" v-if="commentList.list && commentList.list.length == 0">
                <span>
                    <img class="no-comment disabled" :src="staticImageUrl('/images/look/no_comment_list.png')" alt="">
                    <p class="no-comment-text">暂无评论哦，快来抢沙发吧！</p>
                </span>
            </div>
            <scroller
                    ref="myscroller"
                    :on-refresh="refresh"
                    :on-infinite="infinite" >
                <ul class="comment-list" v-if="commentList.list && commentList.list.length != 0">
                    <li class="comment-item" v-for="(commentItem,mainkey) of commentList.list">
                        <div class="positionR comment-citem">
                            <span class="comment-name">
                                <span class="comment-cname">{{commentItem.userName}}</span>
                                <span class="comment-self-mark" v-if="commentItem.self">自己</span>
                            </span>
                            <span class="comment-item-right">
                                <span class="comment-time">{{commentItem.timeStr}}</span>
                                <span class="comment-icon-wpraise">
                                    <img @click.prevent="$emit('isLike',{isLike:true,likeType:0,likeKey:commentItem.mainId,mainId:commentItem.mainId,subId:-1})" v-if="!commentItem.hadLiked" class="comment-icon-praise"
                                         :src="staticImageUrl('/images/look/icon_collect_gray.png')" alt="">
                                    <img @click.prevent="$emit('isLike',{isLike:false,likeType:0,likeKey:commentItem.mainId,mainId:commentItem.mainId,subId:-1})" v-else class="comment-icon-praise"
                                         :src="staticImageUrl('/images/look/icon_collect_red.png')" alt="">
                                    <span class="praise-num">{{commentItem.likeNum}}</span>
                                </span>
                            </span>
                        </div>
                        <div class="comment-one-floor-text" @click="dealComment({userName:commentItem.userName,mainId:commentItem.mainId})">
                            {{commentItem.content}}
                            <!--删除评论、举报评论等等，暂时注释掉-->
                            <!--<ul class="comment-deal" v-if="isShowCommentDeal">-->
                            <ul class="comment-deal" v-if="false">
                                <li class="comment-deal-item" @click="$emit('deleteComment',{mainId:commentItem.mainId})">删除评论</li>
                            </ul>
                        </div>
                        <div>
                            <span v-if="commentItem.commentedNum > 0" class="commont-pick-up" @click="showSubComment({mainId:commentItem.mainId,index:mainkey})">
                                <span v-if="showSubIndex == mainkey">
                                    收起评论
                                    <span class="iconfont icon-arrows_up1" ></span>
                                </span>
                                <span v-else>
                                    查看{{commentItem.commentedNum}}条评论
                                    <span class="iconfont icon-arrows_down"></span>
                                </span>
                            </span>
                            <div class="animated-slide" v-if="subCommentList && subCommentList.list && subCommentList.list.length > 0 && showSubIndex == mainkey" >
                                <ul class="comment-sub-list">
                                    <li class="comment-sub-item" v-for="(subCommentItem,subKey) in subCommentList.list" >
                                        <div class="positionR comment-citem">
                                            <span class="comment-name">
                                                <span class="comment-cname">{{subCommentItem.userName}}</span>
                                                <span class="comment-self-mark" v-if="subCommentItem.self">自己</span>
                                            </span>
                                            <span class="comment-item-right">
                                                <span class="comment-time">{{subCommentItem.timeStr}}</span>
                                                <span class="comment-icon-wpraise">
                                                    <img v-if="!subCommentItem.hadLiked" @click.prevent="$emit('isLike',{isLike:true,likeType:1,likeKey:subCommentItem.subId,mainId:subCommentItem.mainId,subId:subCommentItem.subId})" class="comment-icon-praise"
                                                         :src="staticImageUrl('/images/look/icon_collect_gray.png')" alt="">
                                                    <img v-else @click.prevent="$emit('isLike',{isLike:false,likeType:1,likeKey:subCommentItem.subId,mainId:subCommentItem.mainId,subId:subCommentItem.subId})" class="comment-icon-praise"
                                                         :src="staticImageUrl('/images/look/icon_collect_red.png')" alt="">
                                                    <span class="praise-num">{{subCommentItem.likeNum}}</span>
                                                </span>
                                            </span>
                                        </div>
                                        <div class="">
                                            <p @click="dealComment({userName:subCommentItem.userName,mainId:subCommentItem.mainId,subId:subCommentItem.subId})" class="comment-one-floor-text" >{{subCommentItem.content}}</p>
                                        </div>
                                    </li>
                                    <li v-if="subCommentList.totalPages > subCommentListcurPage">
                                        <span class="sub-check-more" @click="checkMore({mainId:commentItem.mainId})">
                                            查看更多
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </scroller>
            <div class="comment-bottom-winput">
                <div class="comment-wtextarea">
                    <textarea ref="bottomTextArea" name="bottomTextArea" id="bottomTextArea" @focus="getInputFocus" @blur="iosBlur" class="input-comment" v-model="commentVal" rows=1 cols=40 placeholder="写点让TA高兴的话吧"></textarea>
                </div>
                <span class="comment-send-btn" @click="sendComment">发送</span>
            </div>
        </div>
        <v-bord >
            <div @click="closeComment" slot="cantClick" class="com_black"></div>
        </v-bord>

    </div>
</template>

<script>
    export default {
        name: "CommentList",
        props:{
            commentList:{
                type:Object,
                default:function () {
                    return {
                        list:[]
                    }
                }
            },
            subCommentList:Object,
            isCommentSuccess:Boolean,
        },
        data() {
            return {
                commentVal:'',
                isShowCommentDeal:false,
                nowMainId:-1,
                nowSubId:-1,
                showSubIndex:-1,
                commentListcurPage:1,
                subCommentListcurPage:1,
                timer:'',
            }
        },
        methods:{
            getInputFocus(){
                let timer = null;
                let that = this;
                let i = 0;
                clearInterval(timer);
                timer = setInterval(function () {
                    if(i<=10){
                        document.body.scrollTop = document.body.scrollHeight;
                        i++
                    }else{
                        clearInterval(timer);
                    }
                },10)
            },
            closeComment(){
                let commentClass = this.$refs.commentRef.getAttribute("class");
                this.$refs.commentRef.className = commentClass+" commentDown";
                setTimeout(()=>{
                    this.$emit('closeComment')
                },200)
            },
            dealComment(dealMsg){
                let that = this;
                let tempDealMsg = Object.assign({},{content:that.commentVal,mainId:-1,subId:-1,userName: ''},dealMsg);
                this.nowMainId = tempDealMsg.mainId;
                this.nowSubId = tempDealMsg.subId;
                this.$refs.bottomTextArea.placeholder = "@"+tempDealMsg.userName;
                //     this.isShowCommentDeal = true;
                // this.$emit('doComment',tempDealMsg)
                /*评论*/
            },
            showSubComment(obj){
                if(this.showSubIndex < 0){
                    this.$emit('getSubCommentList',{mainId:obj.mainId,subId:-1})
                    this.showSubIndex = obj.index;
                }else{
                    this.subCommentListcurPage = 1;
                    this.showSubIndex = -1;
                }
            },
            showSonComment(obj){
                let that = this;
                that.showSubIndex = obj.index;
                this.$emit('getSubCommentList',{mainId:obj.mainId,subId:-1})
            },
            toScrollTop(){
                this.$refs.myscroller.scrollTo(0, 0, true);
            },
            checkMore(obj){
                this.subCommentListcurPage = this.subCommentList.curPage;
                if( this.subCommentList.totalPages && this.subCommentListcurPage < this.subCommentList.totalPages ){
                    this.subCommentListcurPage ++;
                    this.$emit('getSubCommentList',{mainId:obj.mainId,subId:-1,checkCurPage:this.subCommentListcurPage,isLoadingMore:true})
                }
            },
            sendComment(){
                // $("#bottomTextArea").focus();
                let that = this;
                let cb = function(isToTop) {
                    if(that.nowMainId < 0){
                        that.showSubIndex ++;
                    }
                    if(that.nowSubId < 0){
                        that.$refs.myscroller.scrollTo(0, 0, true)
                    }
                    that.nowMainId = -1;
                    that.nowSubId = -1;
                }
                this.$emit('doComment',{content:that.commentVal,mainId:that.nowMainId,subId:that.nowSubId,cb:cb});

            },
            /*下拉刷新*/
            refresh(done){
                setTimeout(()=>{
                    this.$emit('getSubCommentList');
                    this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
            /*上啦加载*/
            infinite(){
                this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                this.commentListcurPage = this.commentList.curPage;
                if( this.commentListcurPage >= this.commentList.totalPages){
                    return false;
                }
                this.commentListcurPage ++ ;
                this.$emit('getSubCommentList',{checkCurPage:this.commentListcurPage,isLoadingMore:true});
            }
        },
        components: {
            'v-bord': () => import('../alert/Bord')
        },
        watch:{
            isCommentSuccess:function (val) {
                if(val){
                    this.commentVal = '';
                    this.$refs.bottomTextArea.placeholder = "写点让TA高兴的话吧";
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .comment {
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        height: 5.35rem;
        -webkit-animation:commentAnimation .3s linear;
        -o-animation: commentAnimation .3s linear ;
        animation: commentAnimation .3s linear ;
    }
    @keyframes commentAnimation {
        0%{
            bottom: -100%;
        }
        100%{
            bottom: 0%;
        }
    }
    .animated-slide{
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms ;
        -o-transition: all 500ms ;
        transition: all 500ms ;
        /*-webkit-animation:animatedSlide .3s linear;*/
        /*-o-animation: animatedSlide .3s linear ;*/
        /*animation: animatedSlide .3s linear ;*/
    }

    .comment-position-conent{
        height: 100%;
        z-index: 1050;
        background-color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        overflow: hidden;
    }
    .commentDown{
        -webkit-animation:commentDown1 .3s linear;
        -o-animation: commentDown1 .3s linear ;
        animation: commentDown1 .3s linear ;
    }
    @keyframes commentDown1 {
        0%{
            bottom: 0%;
        }
        100%{
            bottom: -100%;
        }
    }
    .no-wcomment {
        position: relative;
        z-index: 1060;
        background-color: #fff;
        width: 3.75rem;
        height: 5.5rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;

        .no-comment {
            width: 1.8rem;
            height: 1.8rem;
        }

        .no-comment-text {
            color: #525866;
            text-align: center;
            padding-top: .2rem;
        }
    }

    .comment-list {
        position: relative;
        z-index: 1060;
        background-color: #fff;
        width: 3.75rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding: 0 .15rem;
        overflow: auto;
        .comment-item:last-child{
            border-bottom: none;
        }
    }

    .comment /deep/ .com_black {
        background-color: rgba(0, 0, 0, .5);
    }

    .comment-bottom-winput {
        position: absolute;
        bottom: 0;
        left: 0;
        height: .49rem;
        background-color: #F5F5F5;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        padding: 0 .1rem;
        z-index: 1060;
    }

    .comment-send-btn {
        display: inline-block;
        width: .5rem;
        height: .24rem;
        line-height: .24rem;
        color: #fff;
        text-align: center;
        background-color: #8BA9E8;
        border-radius: .25rem;
        font-size: .12rem;
    }

    .input-comment {
        outline: none;
        background-color: #F5F5F5;
        width: 100%;
        border: none;
        color: #000;
        top: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .comment-wtextarea {
        position: relative;
        height: .49rem;
        -webkit-flex: 1;
        flex: 1;
    }

    .comment-name {
        color: #999;
        font-size: .13rem;
        -webkit-flex: 1;
        flex: 1;
    }

    .comment-self-mark {
        font-size: .1rem;
        display: inline-block;
        background-color: #8BA9E8;
        color: #fff;
        padding: 0 .01rem;
        margin-left: .03rem;
    }

    .comment-time {
        font-size: .1rem;
        color: #999;
        padding-right: .1rem;
        padding-left: .15rem;
    }

    .comment-one-floor-text {
        color: #4D4D4D;
        font-size: .14rem;
        padding: .03rem 0;
        position: relative;
    }
    .comment-deal{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background-color: #fff;
        width: 1rem;
        height: .3rem;
        line-height: .26rem;
        text-align: center;
        border-radius: .05rem;
        padding: .02rem .1rem;
        -webkit-box-shadow: 0 0 .05rem #ccc;
        -moz-box-shadow: 0 0 .05rem #ccc;
        box-shadow: 0 0 .05rem #ccc;
    }
    .commont-pick-up {
        font-size: .11rem;
        color: #999;
    }

    .comment-icon-wpraise {
        width: .32rem;
        position: absolute;
        right: -.2rem;
        top: -.06rem;
        bottom: 0;
        margin: auto;
        .comment-icon-praise {
            width: .32rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: .1rem .1rem 0 .1rem;
        }
    }

    .comment-item-right {
        float: right;
    }

    .comment-item {
        padding-top: .2rem;
        padding-right: .25rem;
        padding-bottom: .2rem;
        border-bottom: 1px solid #F0F0F0;
    }

    .praise-num {
        color: #999;
        display: inline-block;
        white-space: nowrap;
        position: relative;
        left: 50%;
        margin-left: -50;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .comment-citem {
        display: -webkit-flex;
        display: flex;
    }
    .comment-sub-list{
        padding-left: .1rem;
    }
    .comment-sub-item{
        padding-bottom: 0;
        padding-top: .2rem;
    }
    .icon-arrows_up1,.icon-arrows_down{
        position: relative;
        top: .01rem;
        left: -.01rem;
    }
    .sub-check-more{
        color: #999;
        padding: .1rem 0;
    }
</style>